<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app" style="overflow: hidden;">
	<!-- 添加车辆 -->
	<el-dialog :visible.sync="visible1" title="添加车辆" width="60%">
	  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
	    <el-form-item label="车牌号" prop="carnumber">
	      <el-input v-model="ruleForm.carnumber"></el-input>
	    </el-form-item>
		<el-form-item label="车辆类型" prop="cartype">
		  <el-input v-model="ruleForm.cartype"></el-input>
		</el-form-item>
		<el-form-item label="车辆颜色" prop="color">
		  <el-input v-model="ruleForm.color"></el-input>
		</el-form-item>
		<el-form-item label="车辆价格" prop="price">
		  <el-input v-model="ruleForm.price"></el-input>
		</el-form-item>
	    <el-form-item label="出租价格" prop="rentprice">
	      <el-input v-model="ruleForm.rentprice"></el-input>
	    </el-form-item>
		<el-form-item label="出租押金" prop="deposit">
		  <el-input v-model="ruleForm.deposit"></el-input>
		</el-form-item>
		<el-form-item label="车辆描述" prop="description">
		  <el-input v-model="ruleForm.description"></el-input>
		</el-form-item>
		 <el-form-item label="上传照片" prop="carimg">
			<el-upload
				class="upload-demo"
				action="#"
				:show-file-list="false"
				:http-request="fileUpload"
			  >
				<el-button type="success" icon="el-icon-folder-add">点击上传</el-button>
			  </el-upload>
			  <img style="position: relative;top: 20px;" v-if="imgSrc" :src="imgSrc" alt height="200">
		  </el-form-item>
		<el-form-item>
		  <el-button type="primary" @click="addForm('ruleForm')">立即创建</el-button>
		  <el-button @click="resetForm('ruleForm')">重置</el-button>
		</el-form-item>
	  </el-form>
	</el-dialog>
	
	<!-- 编辑车辆 -->
	<el-dialog :visible.sync="visible2" title="编辑车辆" width="40%">
	  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
	    <el-form-item label="车牌号" prop="carnumber">
	      <el-input v-model="ruleForm.carnumber" readOnly></el-input>
	    </el-form-item>
	    <el-form-item label="车辆类型" prop="cartype">
	      <el-input v-model="ruleForm.cartype"></el-input>
	    </el-form-item>
	    <el-form-item label="车辆颜色" prop="color">
	      <el-input v-model="ruleForm.color"></el-input>
	    </el-form-item>
	    <el-form-item label="车辆价格" prop="price">
	      <el-input v-model="ruleForm.price"></el-input>
	    </el-form-item>
	    <el-form-item label="出租价格" prop="rentprice">
	      <el-input v-model="ruleForm.rentprice"></el-input>
	    </el-form-item>
	    <el-form-item label="出租押金" prop="deposit">
	      <el-input v-model="ruleForm.deposit"></el-input>
	    </el-form-item>
	    <el-form-item label="车辆描述" prop="description">
	      <el-input v-model="ruleForm.description"></el-input>
	    </el-form-item>
	     <el-form-item label="上传照片" prop="carimg">
	    	<el-upload
	    		class="upload-demo"
	    		action="#"
	    		:show-file-list="false"
	    		:http-request="fileUpload"
	    	  >
	    		<el-button type="success" icon="el-icon-folder-add">点击上传</el-button>
	    	  </el-upload>
	    	  <img style="position: relative;top: 20px;" :src="ruleForm.carimg" alt height="200">
	      </el-form-item>
	   <el-form-item>
	     <el-button type="primary" @click="editForm('ruleForm')">立即编辑</el-button>
	   </el-form-item>
	  </el-form>
	</el-dialog>
	
	<div style="margin-top: 60px;margin-left:80px;border: 0px solid red;" >
			<el-form :model="searchRuleForm" ref="searchRuleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item prop="carnumber" label="车牌号：" style="margin-left: -45px;">
					<el-input v-model="searchRuleForm.carnumber" placeholder="请输入车牌号" style="width: 230px;float: left"></el-input>
				</el-form-item>
				<el-form-item prop="isrenting" label="出租状态：" style="position: relative;top: -63px;left: 300px;">
					<el-radio v-model="searchRuleForm.isrenting" label="0" style="position: relative;left: -90px;">未出租</el-radio>
					<el-radio v-model="searchRuleForm.isrenting" label="1" style="position: relative;left: -90px;">已出租</el-radio>
					<el-button type="primary" icon="el-icon-search" style="float: left;position: relative;left: 200px;" @click="submitForm()">搜索</el-button>
					<el-button type="warning" icon="el-icon-refresh-right" style="position: relative;left: 3px;" @click="resetForm('searchRuleForm')">重置</el-button>
					<el-button type="success" icon="el-icon-folder-add" style="position: relative;left: 3px;" @click="add()">添加</el-button>
				</el-form-item>				
			</el-form>
			<el-table
				:data="tableData"
				border
				stripe
				style="width: 100%;position: relative;top: -60px;">
			<el-table-column
					fixed
					prop="carnumber"
					label="车牌号"
					width="120">
			</el-table-column>
			<el-table-column
					prop="cartype"
					label="车辆类型"
					width="80">
			</el-table-column>
			<el-table-column
					prop="color"
					label="车辆颜色"
					width="80">
			</el-table-column>
			<el-table-column
					prop="price"
					label="车辆价格"
					width="90">
			</el-table-column>
			<el-table-column
					prop="rentprice"
					label="出租价格"
					width="90">
			</el-table-column>
			<el-table-column
					prop="deposit"
					label="出租押金"
					width="90">
			</el-table-column>
			<el-table-column
					label="出租状态"
					width="80">
				<template slot-scope="scope">
			　　　　<font v-if="scope.row.isrenting == 0">未出租</font>
				   <font  v-if="scope.row.isrenting == 1">已出租</font>
			　　</template>
			</el-table-column>
			<el-table-column
					prop="description"
					label="车辆描述"
					width="130">
			</el-table-column>
			<el-table-column 
					label="缩略图" 
					width="90" 
					align="center">
				<template slot-scope="scope">
				  <el-image :src="scope.row.carimg" style="height:50px" title="点击查看大图" :preview-src-list="[scope.row.carimg]" />
				</template>
			  </el-table-column>
			<el-table-column
					prop="createtime"
					label="创建时间"
					width="160">
			</el-table-column>
			<el-table-column label="操作"
        width="100"
      >
				<template slot-scope="scope">
					<el-button
							size="mini"
							type="primary"
							icon="el-icon-edit"
							@click="edit(scope.row)">编辑</el-button>
					<el-button
							size="mini"
							type="danger"
							icon="el-icon-delete"
							@click="del(scope.row)">删除</el-button>
				</template>
			</el-table-column>
			</el-table>
			<el-pagination style="margin-top: 20px;float: right;position: relative;top: -60px;"
						   background
						   layout="prev, pager, next"
						   :page-size="pageSize"
						   :total="total"
						   :current-page.sync="currentPage"
						   @current-change="page">
			</el-pagination>
	</div>
</div>
</body>
<script src="js/vue.js"></script>
<script src="js/elementui.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  new Vue({
	el: '#app',
	data() {
		return {
			tableData:null,
			pageSize:5,
			total:null,
			currentPage:1,
			uploadUrl: 'http://localhost:8181/car/uploadImg',
			searchRuleForm: {
			  carnumber:'',
			  isrenting:''
			},
			ruleForm: {
			  carnumber:'',
			  cartype:'',
			  color:'',
			  price:'',
			  rentprice:'',
			  deposit:'',
			  isrenting:0,
			  description:'',
			  carimg:''
			},
			rules: {
			  carnumber: [{required: true, message: '请输入车牌号', trigger: 'blur'}],
			  cartype: [{required: true, message: '请输入车辆类型', trigger: 'blur'}],
			  color: [{required: true, message: '请输入车辆颜色', trigger: 'blur'}],
			  price: [{required: true, message: '请输入车辆价格', trigger: 'blur'}],
			  rentprice: [{required: true, message: '请输入出租价格', trigger: 'blur'}],
			  deposit: [{required: true, message: '请输入出租押金', trigger: 'blur'}],
			  description: [{required: true, message: '请输入车辆描述', trigger: 'blur'}],
			  carimg: [{required: true, message: '请上传车辆照片', trigger: 'blur'}]
			},
			visible1:false,
			visible2:false,
			imgSrc:'',
			dataForm:{
				extName:'',
				fileBase64:''
			}
		}
	},
	methods:{
		fileUpload(file) {
		  this.fileToBase64(file.file).then(res => {
			this.imgSrc = res
			this.dataForm.extName = res.substring(res.indexOf('/') + 1, res.indexOf(';'))
			const len = 19 + this.dataForm.extName.length
			this.dataForm.fileBase64 = res.substring(len)
			this.dataFormSubmit()
		  }).catch(err => {
			console.log(err)
			this.$message.error(err)
		  })
		},
		fileToBase64(file) {
		  return new Promise((resolve, reject) => {
			const reader = new FileReader()
			let fileResult = ''
			if (file.size > 10 * 1024 * 1024) {
			  reject('文件大小不能超过10M')
			}
			reader.readAsDataURL(file)
			reader.onload = () => {
			  fileResult = reader.result
			}
			reader.onerror = function(error) {
			  reject(error)
			}
			reader.onloadend = function() {
			  resolve(fileResult)
			}
		  })
		},
		dataFormSubmit() {
			const param = {
				'extName': this.dataForm.extName,
				'fileBase64': this.dataForm.fileBase64
			}
			let _this = this
			axios.post('http://localhost:8181/car/uploadImg',param).then(function (response) {
				if(response.data.code == 0){
					_this.ruleForm.carimg = response.data.data.src
				} else {
					_this.$alert(response.data.msg, '提示', {
						confirmButtonText: '确定'
					});
				}
			})
		},
		add(){
			this.visible1 = true
		},
		addForm(formName) {
			this.$refs[formName].validate((valid) => {
			  if (valid) {
				let _this = this
				axios.post('http://localhost:8181/car/add',_this.ruleForm).then(function (response) {
					if(response.data.code == 0){
						_this.$alert('车辆【'+_this.ruleForm.carnumber+'】添加成功', '', {
							confirmButtonText: '确定',
							callback: action => {
								location.reload()
							}
						});
					} else {
						_this.$alert(response.data.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				})
			  } else {
				console.log('error submit!!');
				return false;
			  }
			});
		  },
		resetForm(formName) {
		  this.$refs[formName].resetFields();
		},
		submitForm() {
			const _this = this
			//让翻页复原
			_this.currentPage=1
			axios.get('http://localhost:8181/car/list?carnumber='+_this.searchRuleForm.carnumber+'&isrenting='+_this.searchRuleForm.isrenting+'&page='+_this.currentPage+'&limit='+_this.pageSize).then(function (resp) {
				_this.tableData = resp.data.data
				_this.total = resp.data.count
			})
		},
		page(currentPage){
			const _this = this
			axios.get('http://localhost:8181/car/list?carnumber='+_this.searchRuleForm.carnumber+'&isrenting='+_this.searchRuleForm.isrenting+'&page='+currentPage+'&limit='+_this.pageSize).then(function (resp) {
				_this.tableData = resp.data.data
				_this.total = resp.data.count
			})
		},
		edit(row){
			this.visible2 = true
			this.ruleForm.carnumber = row.carnumber
			this.ruleForm.cartype = row.cartype
			this.ruleForm.color = row.color
			this.ruleForm.price = row.price
			this.ruleForm.rentprice = row.rentprice
			this.ruleForm.deposit = row.deposit
			this.ruleForm.description = row.description
			this.ruleForm.carimg = row.carimg
		},
		editForm(formName) {
			this.$refs[formName].validate((valid) => {
			  if (valid) {
				let _this = this
				axios.post('http://localhost:8181/car/update',_this.ruleForm).then(function (response) {
					if(response.data.code == 0){
						_this.$alert('车辆【'+_this.ruleForm.carnumber+'】编辑成功', '', {
							confirmButtonText: '确定',
							callback: action => {
								location.reload()
							}
						});
					} else {
						_this.$alert(response.data.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				})
			  } else {
				console.log('error submit!!');
				return false;
			  }
			});
		  },
		del(row) {
			const _this = this
			this.$confirm('确认删除【'+row.carnumber+'】吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				axios.delete('http://localhost:8181/car/delete?carnumber='+row.carnumber).then(function (resp) {
					if(resp.data.code==0){
						_this.$alert('【'+row.carnumber+'】已删除', '', {
							confirmButtonText: '确定',
							callback: action => {
								location.reload()
							}
						});
					}
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		}
	},
	created() {
		const _this = this
		axios.get('http://localhost:8181/car/list').then(function (resp) {
			_this.tableData = resp.data.data
			_this.total = resp.data.count
		})
	}
  })
</script>
	
<style>
    .home_container {
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
    }

    .el-header {
        background-color: #20a0ff;
        color: #333;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .el-aside {
        background-color: #ECECEC;
    }

    .el-main {
        background-color: #fff;
        color: #000;
        text-align: center;
    }

    .el-footer {
        background-color: #ea7e53;
        color: #fff;
        font-size: 22px;
        line-height: 60px;
		text-align: center;
    }

    .home_title {
        color: #fff;
        font-size: 22px;
        display: inline;
    }

    .home_userinfo {
        color: #fff;
        cursor: pointer;
    }

    .home_userinfoContainer {
        display: inline;
        margin-right: 20px;
    }
</style>
</html>
